import { styled } from "@linaria/react";
import { View, Text, Image } from "@tarojs/components";

import duck from "@/assets/duck.jpg";
import upvoteFillSVG from "@/assets/upvote-fill.svg";
import downvoteFillSVG from "@/assets/downvote-fill.svg";
import { useMemo } from "react";

const voteBackgroundColor = ["#0000ff20", "transparent", "#ff000020"];
const voteSVG = [downvoteFillSVG, "", upvoteFillSVG];
const voteColor = ["blue", "black", "#f33535"];
const voteStatus = ["踩了", "", "赞了"];

export default function Comment({ comment }) {
  const { body, updated_at, user_image, user_like, user_name } = comment;
  const timeStr = useMemo(() => new Date(updated_at).toLocaleString(), [updated_at]);
  const local_like = user_like + 1;

  return (
    <CommentView>
      <UserInfoBar>
        <UserImage src={ user_image } mode="aspectFit" />
        <UserName>{ user_name }</UserName>
      </UserInfoBar>
      <CommentContent>{ body }</CommentContent>
      <CommentTime>{ timeStr }</CommentTime>
      { user_like !== 0 && (
        <UserVoteBar style={{backgroundColor: voteBackgroundColor[local_like]}}>
          <VoteImage src={voteSVG[local_like]} />
          <VoteStatus style={{color: voteColor[local_like]}}>{voteStatus[local_like]}</VoteStatus>
        </UserVoteBar>
      )}
    </CommentView>
  );
}

const CommentView = styled(View)`
  position: relative;
  padding: 20px;

  display: flex;
  flex-direction: column;
`;

const UserInfoBar = styled(View)`
  width: fit-content;
  height: 70px;

  display: flex;
  align-items: center;
`;
const UserName = styled(Text)`
  font-size: 28px;
`;
const UserImage = styled(Image)`
  height: 70px;
  width: 70px;

  margin-right: 20px;

  clip-path: circle();
`;

const CommentContent = styled(Text)`
  margin: 15px 0;
`;
const CommentTime = styled(Text)`
  font-size: 24px;
  color: gray;
`;

const UserVoteBar = styled(View)`
  position: absolute;
  top: 25px;
  right: 30px;

  width: 135px;
  height: 65px;
  padding: 10px;
  box-sizing: border-box;
  border-radius: 15px;

  display: flex;
  align-items: center;
  justify-content: space-between;

`;
const VoteImage = styled(Image)`
  width: 40px;
  height: 40px;
`;

const VoteStatus = styled(Text)`
  font-size: 28px;
  text-align: center;
  flex-grow: 1;
`;
